<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>

<style type="text/css">
.ztree {
	line-height: 23px
}

ul.ztree li {
	white-space: pre-line !important
}

li.level0 {
	padding: 5px;
}

li.level1 {
	padding-top: 5px;
	border-bottom: 1px dashed #aaa;
}

li.level0,li.level1 {
	float: left;
	clear: both;
	line-height: 23px;
	width: 99%;
}

li.level0 span {
	font-size: 14px !important;
}

li.level0 a span {
	font-weight: 700
}

li.level0 li a span {
	font-weight: 100
}

ul.level0 {
	padding: 3px 0 23px 18px !important;
}

ul.level1,li.level1 span {
	float: left !important;
	clear: right;
}

ul.level1 {
	width: 80%
}

li.level1 a.level1 {
	width: 90px;
	overflow: hidden;
	float: left !important;
	font-weight: 700 !important
}

li.level2 {
	float: left !important;
	line-height: 23px
}

a.level2 span {
	font-size: 12px !important
}

.switch {
	display: none !important
}

.ztree li span.button.chk {
	margin: 2px 3px 0 0 !important
}
</style>

<form:form modelAttribute="model" cssClass="validate" id="roleForm"
	action="app/role/save">
	<form:hidden path="id" />
	<div class="header">
		<h3>&nbsp;&nbsp;基本信息</h3>
	</div>
	<table class=" form-table">
		<tbody>
			<tr>
				<td class="td1">名称：</td>
				<td class="td2"><form:input path="name" cssClass="required" />
				</td>
			</tr>
			<tr>
				<td class="td1">描述：</td>
				<td class="td2"><form:textarea path="description"
						cssStyle="width:240px" /></td>
			</tr>
			<tr>
				<td class="td1">数据权限：</td>
				<td class="td2"><form:select path="dataRange"
						cssClass="required">
						<form:option value="11">工单级</form:option>
						<form:option value="111">项目级</form:option>
						<form:option value="22">省市县级</form:option>
						<form:option value="33">客户管理员</form:option>
						<form:option value="1111">公司级</form:option>
					</form:select></td>
			</tr>
			<tr>
				<td class="td1">是否有效：</td>
				<td class="td2"><form:checkbox path="status" /></td>
			</tr>
			<tr>
				<td class="td1">显示顺序：</td>
				<td class="td2"><form:input path="orderNum" cssClass="number" />
				</td>
			</tr>
		</tbody>
	</table>
	<input type="hidden" id="menuPermissionValue"
		name="menuPermissionValue" />
</form:form>
<div class="box tabbedBox">
	<div class="header">
		<ul>
			<li><a class="current" href="#rolePermission">权限</a>
			</li>
			<li><a href="#roleUser"
				data-beforeclick="roleUser_beforeClick();">角色成员</a>
			</li>
		</ul>
		<h2>&nbsp;</h2>
	</div>
	<div style="padding:0" class="content tabbed">
		<div id="rolePermission">
			<isperp:tree id="menuPermission" modal="false">
				<isperp:async enable="true" url="app/role/getMenus"
					otherParam="[\"roleId\",$('#id').val()]"></isperp:async>
				<isperp:check enable="true" chkboxType="{'Y' :'ps', 'N' : 's' }"></isperp:check>
				<isperp:view showLine="false" showTitle="false" showIcon="false"></isperp:view>
			</isperp:tree>
		</div>

		<div id="roleUser">

			<isperp:grid gridId="roleUserGrid" idFieldName="name"
				url="app/role/listRoleUser?roleId=${model.id }" gridTitle="角色成员"
				cusFormatterActions="true" showSearchbar="false" 
				cusDeleteUrl="app/role/deleteRoleUser?roleId=${model.id }">
				<jsp:attribute name="toolbar">
				<isperp:toolbar id="projectMemberGridToolbar">
					<isperp:button id="projectMemberGridCreate" icon="icon-plus"
							text="增加角色成员" onclick="addRoleUser();"></isperp:button>
				</isperp:toolbar>
				</jsp:attribute>
				<jsp:body> 
				<isperp:column name="id" title="id" hidden="true"></isperp:column>
				<isperp:column name="departmentName" title="所在部门" width="100">
				</isperp:column>
				<isperp:column name="name" title="用户帐号" width="100">
				</isperp:column>
				<isperp:column name="fullname" title="姓名" width="100">
				</isperp:column>
				<isperp:column name="gender" title="性别" width="50">
				</isperp:column>
				<isperp:column name="email" title="邮箱地址" width="150">
				</isperp:column>
				<isperp:column name="position" title="职位" width="60">
				</isperp:column>
				<isperp:column name="mobile" title="移动电话" width="100">
				</isperp:column>
				</jsp:body>
			</isperp:grid>
		</div>
	</div>
</div>
<div style="display:none">
	<input id="selectSetPerson_input">
	<isperp:departmentUser displayValue="" ifIncludeNoRoleUser="true" cusDialogHeight="900"
		afterSelected="afterSelect_selectSetPerson(row);" multiselect="true"
		displayValueStyle="width:249px;" displayValueCssClass="required"
		idFieldName="name" valueControlId="selectSetPerson_input"
		id="selectSetPerson" name="selectSetPerson"></isperp:departmentUser>
</div>
<isperp:buttonList>
	<button class="submit"
		onclick="setCheckedNodes();isperp.submitForm();return false;">
		<span class="icon icon-save"></span>提交
	</button>
</isperp:buttonList>
<script type="text/javascript">
	function setCheckedNodes() {
		var nodes = menuPermission.zTree.getCheckedNodes(true);
		var nStr = "";
		$(nodes).each(function(index, node) {
			nStr += node.id + ",";
		});
		$("#menuPermissionValue").val(nStr);
		return true;
	}

	function roleUser_beforeClick() {
		setCheckedNodes();
		return isperp.submitForm({
			forceSync : true,
			success : function() {
				isperp.reloadParentControl();
			}
		});
	}

	function addRoleUser() {
		$('#selectSetPerson').click();
		return false;
	}

	function afterSelect_selectSetPerson(row) {
		var names = row[0];
		var roleId = '${model.id }';
		$.ajax({
			url : 'app/role/saveRoleUser',
			data : {
				roleId : roleId,
				userName : names
			},
			success : function(data) {
				roleUserGrid.search();
			}
		});

	}
</script>